<script setup>
import {computed, ref, watch} from "vue";
// 侦听单个数据
const count = ref(1);
watch(count, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }
)
// 侦听多个数据
const age = ref(18);
const name = ref("ZhangSan");
watch(
    [name, age], ([newName, newAge], [oldName, oldAge]) => {
      console.log(newName, newAge, oldName, oldAge)
    }, {
      immediate: true
    }
)
//深度侦听(不推荐)
const stu = ref({
  name: "ZhangSan",
  age: 18
});
watch(stu, (newValue, oldValue) => {
  console.log(newValue, oldValue)
}, {deep: true})

//精确侦听
const stu2 = ref({
  name: "ZhangSan",
  age: 18
});
watch(
    () => stu2.value.age, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }
)

</script>

<template>
  <div>
    侦听单个数据{{ count }}
    <button @click="count++">+</button>
  </div>
  <div>
    侦听多个数据{{ age }},{{ name }}
    <button @click="age++">+</button>
    <button @click="name='LiSi'">修改</button>
  </div>
  <div>
    深度侦听{{ stu }}
    <button @click="stu.age++">+</button>
    <button @click="stu.name='lisi'">修改</button>
  </div>
  <div>
    精确侦听{{ stu2 }}
    <button @click="stu2.age++">+</button>
    <button @click="stu2.name='lisi'">修改</button>
  </div>
</template>

<style scoped>

</style>
